<template>
    <div class="Header">
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        router
        active-text-color="#ffd04b">

        <el-menu-item class="logo">
          <el-image
            fit="scale-down"
            src="static/logo.png"
            ></el-image>
        </el-menu-item>
        <el-submenu index="3" class="right logo" style="float: right;" >
          <template slot="title">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
            </el-avatar>
          </template>
          <el-menu-item index="/index/user" class="el">个人中心</el-menu-item>
          <el-menu-item>退出</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style scoped>
.logo{
  width: 200px;
}
  .el-image{
    line-height: 60px;
    display: contents;
  }
</style>
